<template>
    <div class="register">
        <div class="regs"></div>
        <div class="sign">
            <div class="sign-in">
                <div class="h3">{{$t('langs.retpassw')}}</div>
                <div class="input-box" style="margin-top: 78px;">
                    <span>{{$t('langs.phonenumb')}}</span>
                    <div class="telephone">
                        <el-select v-model="value">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <img src="../assets/img/中国.png" alt="" class="china">
                        <input type="text" class="input" maxlength="11" style=" border: 1px solid #000;" v-model="tel">
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.SMSvcode')}}</span>
                    <div class="telephone">
                        <input type="text" class="note" maxlength="11" v-model="code">
                        <div class="note1"  @click="sendverificationcode">{{note}}  {{i}}</div>
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.pawd1')}}</span>
                    <div class="telephone">
                        <input type="text" maxlength="16" class="input1" style=" border: 1px solid #000;" v-model="pwass">
                    </div>
                </div>
                <div class="input-box">
                    <span>{{$t('langs.pawd2')}}</span>
                    <div class="telephone">
                        <input type="text" maxlength="16" class="input1" style=" border: 1px solid #000;" v-model="newpawss">
                    </div>
                </div>
                <button class="but" @click="setupdateUserInfo1">{{$t('langs.determine')}}</button>
            </div>
        </div>
    </div>
</template>

<script>
import {getVer,updateUserInfo1} from "@/common/request.js"
export default {
    data() {
        return {
            options: [{//电话区域
                value: '选项1',
                label: '+86'
            }, {
                value: '选项2',
                label: '+86'
            }],
            value: '+86',
            paswrdShow: false, //密码显示或隐藏
            tel: '' ,//电话号码
            pwass: '',//设置密码
            newpawss: '',//确认密码
            code: '',//验证码
            note: this.$t('langs.sendSMS'),
            i: null,
            timer: '',
            a: 0,
        }
    },
    methods: {
        setupdateUserInfo1() {//提交
            if(this.verifications(this.tel,this.pwass,this.newpawss,this.code)) {
                updateUserInfo1({
                    tel: this.tel,
                    password: this.pwass,
                    verification: this.code
                }).then(res=>{
                    console.log(res)
                    let code = res.code
                    if(code == 0) {
                        this.$msgsuccess('修改成功');
                        this.$router.push({
                            path: './login'
                        })
                    }else {
                         this.$msg(res.message);
                    }
                })
            }
        },
        sendverificationcode() {//发送验证码
            let tel = this.tel
            if(this.phoneVerification(tel)) {
                if(this.note == this.$t('langs.sendSMS')) {
                    getVer({tel:tel}).then((res)=>{
                        this.a = 1
                        this.i = 60
                        this.note = this.$t('langs.Sending')
                        this.gettimer()
                        if(res.code == 0) {
                            this.$msgsuccess(this.$t('langs.Tips.sendtips'));
                        }
                    })
                }else {
                    this.$msg(this.$t('langs.Sendvcode'));
                }
            }
        },
        phoneVerification (tel) {//手机号码验证
            let  myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(tel)) {
                this.$msg(this.$t('langs.Tips.teltips1'));
                return false;
            } 
            return true
        },
        gettimer() {//倒计时
            this.timer = setInterval(()=>{
                console.log(1)
                if(this.a == 1) {
                    this.i--
                    if(this.i==0) {
                        clearInterval(this.timer);
                        this.a = 0
                        this.i = null
                        this.note = this.$t('langs.Sendvcode')
                    }
                }
            }, 1000);
        },
        verifications(tel,pwass,newpawss,code) {
            if(tel == '') {
                this.$msg(this.$t('langs.Tips.teltips2'));
                return false;
            }
            let  myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(tel)) {
                this.$msg(this.$t('langs.Tips.teltips1'));
                return false;
            } 
            if(code == '') {
               this.$msg(this.$t('langs.Tips.sendtips1'));
                return false
            }
            if(!/^[0-9]*[1-9][0-9]*$/.test(code)) {
                this.$msg(this.$t('langs.Tips.sendtips2'));
                return false
            }
            if(pwass == '') {
                 this.$msg(this.$t('langs.Tips.pawdtips1'));
                return false;
            }
            if(/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/.test(pwass)) {
                 this.$msg(this.$t('langs.Tips.pawdtips2'));
                return false;
            }
            if(newpawss == '') {
                this.$msg(this.$t('langs.Tips.pawdtips3'));
                return false;
            }
            if(/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/.test(newpawss)) {
                this.$msg(this.$t('langs.Tips.pawdtips4'));
                return false;
            }
            if(pwass !== newpawss){
                this.$msg(this.$t('langs.Tips.pawdtips5'));
                return false;
            }
            return true
        }
    },
}
</script>

<style lang='scss'>

.register {
    .regs {
        width: 100%;
        height: 165px;
        background: #000;
    }
    .sign {
        width: 100%;
    }
    .sign-in {
        width: 545px;
        color: #101010;
        margin: 0 auto;
        padding: 50px 0;
        >.h3 {
            text-align: center;
            font-size: 28px;
        }
        .input-box {
            margin-top: 12px;
            >span {
                font-size: 12px;
                padding-left: 3px;
            }
            .telephone {
                position: relative;
                margin-top: 6px;
                
                >.china {
                    width: 20px;
                    height: 14px;
                    position: absolute;
                    left: 8px;
                    top: 13px;
                }
                >.input {
                    margin-left: 8px;
                    height: 40px;
                    width: 431px;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    outline: none;
                    padding-left: 8px;
                    letter-spacing:10px;
                }
                >.input1 {
                    width: 534px;
                    height: 40px;
                    outline: none;
                    padding-left: 8px;
                    letter-spacing:10px;
                }
                .note {
                    width: 422px;
                    height: 40px;
                    outline: none;
                    padding-left: 16px;
                    border: 1px solid #000;
                    letter-spacing:15px;
                }
                .note1 {
                    width: 98px;
                    font-size: 14px;
                    height: 40px;
                    border: 1px solid #000;
                    text-align: center;
                    line-height: 40px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    cursor: pointer;
                }
            }
            
        }
        button {
            width: 371px;
            height: 44px;
            background: #000;
            color: #fff;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
            margin-left: 64px;
        }
        .but {
            margin-top: 108px;
        }
    }
  
}
.el-select {
    width: 95px;
    border: 1px solid #000;
}
.el-select .el-input__inner:focus {
    border: none;
}
.el-input__inner {
    border:none;
    font-size: 12px;
    padding: 0 10px 0 37px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #333;
    background: #333;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #101010;
}
.el-checkbox__inner {
    border-radius: 50%;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #333;
}
.el-checkbox__label {
    font-size: 12px;
}
</style>